<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Start your development with a Design System for Bootstrap 4.">
  <meta name="author" content="asher">
  <title>开发者注册</title>
  <!-- Favicon -->
  <link href="/assets/img/brand/favicon.png" rel="icon" type="image/png">
  <!-- Fonts -->
  <link href="/assets/css/fonts.css" rel="stylesheet">
  <!-- Icons -->
  <link href="/assets/vendor/nucleo/css/nucleo.css" rel="stylesheet">
  <link href="/assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!-- Argon CSS -->
  <link type="text/css" href="/assets/css/argon.css?v=1.1.0" rel="stylesheet">
</head>

<body>
  <header class="header-global">
    <nav id="navbar-main" class="navbar navbar-main navbar-expand-lg navbar-transparent navbar-light headroom">
      <div class="container">
        <a class="navbar-brand mr-lg-5" href="/index.html">
          <img src="/assets/img/brand/white.png" alt="brand">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbar_global">
          <div class="navbar-collapse-header">
            <div class="row">
              <div class="col-6 collapse-brand">
                <a href="/index.html">
                  <img src="/assets/img/brand/blue.png" alt="brand">
                </a>
              </div>
              <div class="col-6 collapse-close">
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">
                  <span></span>
                  <span></span>
                </button>
              </div>
            </div>
          </div>
          <ul class="navbar-nav align-items-lg-center ml-lg-auto">
            <li class="nav-item">
              <a class="nav-link nav-link-icon" href="https://dwz.cn/xVY5DrHV" target="_blank" data-toggle="tooltip" title="我想加入官方群">
                <i class="fa fa-qq"></i>
                <span class="nav-link-inner--text d-lg-none">QQ群</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link nav-link-icon" href="https://dwz.cn/xVY5DrHV" target="_blank" data-toggle="tooltip" title="我想关于公众号">
                <i class="fa fa-weixin"></i>
                <span class="nav-link-inner--text d-lg-none">公众号</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link nav-link-icon" href="https://dwz.cn/xVY5DrHV" target="_blank" data-toggle="tooltip" title="可惜还没创建微博呀">
                <i class="fa fa-weibo"></i>
                <span class="nav-link-inner--text d-lg-none">微博</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link nav-link-icon" href="https://dwz.cn/xVY5DrHV" target="_blank" data-toggle="tooltip" title="我可以听一下歌吗">
                <i class="fa fa-music"></i>
                <span class="nav-link-inner--text d-lg-none">音乐</span>
              </a>
            </li>
            <li class="nav-item d-none d-lg-block ml-lg-4">
              <a href="/login.html" target="_blank" class="btn btn-neutral btn-icon">
                <span class="btn-inner--icon">
                  <i class="fa fa-mail-reply mr-2"></i>
                </span>
                <span class="nav-link-inner--text">回到登录</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <main>
    <section class="section section-shaped section-lg">
      <div class="shape shape-style-1 bg-gradient-default">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="container pt-lg-md">
        <div class="row justify-content-center">
          <div class="col-lg-5">
            <div class="card bg-secondary shadow border-0">

              <div class="card-body px-lg-5 py-lg-5">
                <div class="text-center text-muted mb-4">
                  <small>开发者注册</small>
                </div>
                <form id="form_one">
                  <div class="form-group">
                    <div class="input-group input-group-alternative mb-3">
                      <div class="input-group-prepend">
                        <span class="input-group-text"><i class="ni ni-single-02"></i></span>
                      </div>
                      <input class="form-control" placeholder="QQ" type="text" name="username">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group input-group-alternative">
                      <div class="input-group-prepend">
                        <span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
                      </div>
                      <input class="form-control" placeholder="Password" type="password" name="password">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group input-group-alternative mb-3">
                      <div class="input-group-prepend">
                        <span class="input-group-text"><i class="ni ni-mobile-button"></i></span>
                      </div>
                      <input class="form-control" placeholder="手机号" type="tel" name="phone">
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group col-7">
                      <div class="input-group input-group-alternative">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><i class="ni ni-caps-small"></i></span>
                        </div>
                        <input class="form-control" placeholder="验证码" type="password" name="verify_code">
                      </div>
                    </div>
                    <div class="form-group col">
                      <img alt="换一张" style="height: 46px; cursor:pointer;" src="/account/verify_code" onclick="this.src='/account/verify_code?n='+Math.random();">
                    </div>
                  </div>
                  <div class="row my-4">
                    <div class="col-12">
                      <div class="custom-control custom-control-alternative custom-checkbox">
                        <input class="custom-control-input" id="customCheckRegister" type="checkbox">
                        <label class="custom-control-label" for="customCheckRegister"><span>我同意 <a href="#">注册协议，默认QQ邮箱</a></span></label>
                      </div>
                    </div>
                  </div>
                  <div class="text-center">
                    <button type="button" class="btn btn-primary mt-4" id="btn_submit">创建账号</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
  <footer class="footer">
    <div class="container">
      <div class="row row-grid align-items-center mb-5">
        <div class="col-lg-6">
          <h3 class="text-primary font-weight-light mb-2">Lovely Cat Family</h3>
          <h4 class="mb-0 font-weight-light">让我们一起期待更美好的未来</h4>
        </div>

      </div>
      <hr>
      <div class="row align-items-center justify-content-md-between">
        <div class="col-md-6">
          <div class="copyright">
            &copy; 2019 <a href="https://dwz.cn/xVY5DrHV" target="_blank">Lovely Cat Tim</a>.
          </div>
        </div>
        <div class="col-md-6">
          <ul class="nav nav-footer justify-content-end">
            <li class="nav-item">
              <a href="https://dwz.cn/xVY5DrHV" class="nav-link" target="_blank">关于我们</a>
            </li>
            <li class="nav-item">
              <a href="https://dwz.cn/xVY5DrHV" class="nav-link" target="_blank">博客</a>
            </li>
            <li class="nav-item">
              <a href="https://dwz.cn/xVY5DrHV" class="nav-link" target="_blank">声明</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>


  <!-- Core -->
  <script src="/assets/vendor/jquery/jquery.min.js"></script>
  <script src="/assets/vendor/popper/popper.min.js"></script>
  <script src="/assets/vendor/bootstrap/bootstrap.min.js"></script>
  <script src="/assets/vendor/headroom/headroom.min.js"></script>
  <!-- Argon JS -->
  <script src="/assets/js/argon.js?v=1.1.0"></script>

  <!-- Customize JS -->
  <script>
    $("#btn_submit").on("click", function (e) {
        var form = $("#form_one").serializeArray(), param = {};
        $.each(form, function() {
            param[this.name] = this.value;
        });
        if(!/^[1-9][0-9]{4,11}$/.test(param['username'])){
            g_msg('用户名（QQ）只能是数字，且长度为5~11之间');
            return ;
        }
        if(!/^([A-Z]|[a-z]|[0-9]|[`~!@#$%^&*()+=|{}':;',\\\\[\\\\].<>\/?~！@#￥%……&*（）——+|{}【】‘；：”“’。，、？]){6,20}$/.test(param['password'])){
            g_msg('密码长度需要大于6位');
            return ;
        }
        if(param['verify_code']==''){
            g_msg('请输入验证码');
            return ;
        }
        if(document.getElementById("customCheckRegister").checked==false){
            g_msg('请务必勾选注册协议再继续');
            return ;
        }
        $.ajax({
            url: "/account/reg",
            type: "POST",
            dataType: "json",
            data: param,
            success: function(data){
                if(data.code==0){
                    g_msg("恭喜你，注册成功！");
                    window.setTimeout("location.href='/login.html'", 1200);
                }else{
                    g_msg(data.msg);
                }
            },
            error: function(jqXHR){
                g_msg("访问错误，请检查网络是否正常");
            }
        });
    });
  </script>
</body>

</html>
